<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办任务列表</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <!-- 输入框元素，用来新建待办任务 -->
        <form @submit.prevent="addTask">
            <span>新建任务</span>
            <input 
            v-model="taskText"
            placeholder="请输入任务..."
            />
            <button>添加</button>
        </form>
        <!-- 有序列表，使用v-for来构建 -->
        <ol>
            <li v-for="(item, index) in todos">
                {{item}}
                <button @click="remove(index)">
                    删除任务
                </button>
                <hr/>
            </li>
        </ol>
    </div>
    <script>
        const {createApp, ref} = Vue
        const config = {
            setup() {
                const todos = ref([])
                const taskText = ref("")
                const addTask = () => {
                    if (taskText.value.length == 0) {
                        alert("请输入任务")
                        return
                    }
                    todos.value.push(taskText.value)
                    taskText.value = ""
                }
                const remove = (index) => {
                    todos.value.splice(index, 1)
                }
                return {todos, taskText, addTask, remove}
            }
        }
        createApp(config).mount("#Application") 
    </script>
</body>
</html>